<script setup>
import { ref, watch, onUnmounted, computed } from 'vue'

const props = defineProps({
	isLoading: Boolean,
	resultImage: String,
	resultData: Object,
	resultType: {
		type: String,
		default: 'image',
	},
	title: {
		type: String,
		default: '二元',
	},
})

const title = computed(() => {
	return props.title
})

const currentPercentage = ref(0)
const showImage = ref(false)
const finalizingProgress = ref(false)
const currentStep = ref(0)

let simulatedProgressInterval = null
let imageDisplayTimeout = null

const MIN_SIMULATED_PROGRESS_TIME = 5000
const FINAL_PERCENTAGE_ANIMATION_TIME = 1000

// 步骤配置
const steps = [
	{ threshold: 20, text: '初始化计算参数' },
	{ threshold: 40, text: `构建${title.value}网格` },
	{ threshold: 60, text: '计算热力学平衡' },
	{ threshold: 80, text: `分析${title.value}界面` },
	{ threshold: 99, text: `生成${title.value}数据` },
]

// 表格数据处理
const tableData = computed(() => {
	if (!props.resultData || props.resultType !== 'table') return []

	// 将对象转换为表格行数据
	return Object.entries(props.resultData).map(([key, value]) => ({
		property: key,
		value: typeof value === 'number' ? value.toFixed(6) : value,
	}))
})

// 获取属性的英文名称和代码
const getPropertyInfo = (property) => {
	const propertyMap = {
		GM: {
			name: 'Gibbs energy',
			code: 'GM',
			unit: 'J/mol',
		},
		HM: {
			name: 'Enthalpy',
			code: 'HM',
			unit: 'J/mol',
		},
		SM: {
			name: 'Entropy',
			code: 'SM',
			unit: 'J/(mol·K)',
		},
		CPM: {
			name: 'Heat capacity',
			code: 'Cp',
			unit: 'J/(mol·K)',
		},
		VM: {
			name: 'Molar volume',
			code: 'VM',
			unit: 'm³/mol',
		},
		UM: {
			name: 'Internal energy',
			code: 'UM',
			unit: 'J/mol',
		},
		FM: {
			name: 'Helmholtz energy',
			code: 'FM',
			unit: 'J/mol',
		},
		// 添加更多可能的属性
		G: {
			name: 'Gibbs energy',
			code: 'G',
			unit: 'J/mol',
		},
		H: {
			name: 'Enthalpy',
			code: 'H',
			unit: 'J/mol',
		},
		S: {
			name: 'Entropy',
			code: 'S',
			unit: 'J/(mol·K)',
		},
		CP: {
			name: 'Heat capacity',
			code: 'Cp',
			unit: 'J/(mol·K)',
		},
		V: {
			name: 'Molar volume',
			code: 'V',
			unit: 'm³/mol',
		},
		U: {
			name: 'Internal energy',
			code: 'U',
			unit: 'J/mol',
		},
		F: {
			name: 'Helmholtz energy',
			code: 'F',
			unit: 'J/mol',
		},
	}

	return (
		propertyMap[property] || {
			name: property,
			code: property,
			unit: '',
		}
	)
}

const startSimulatedProgress = () => {
	if (simulatedProgressInterval) clearInterval(simulatedProgressInterval)
	if (imageDisplayTimeout) clearTimeout(imageDisplayTimeout)

	currentPercentage.value = 0
	currentStep.value = 0
	showImage.value = false
	finalizingProgress.value = false

	const startTime = Date.now()
	const duration = MIN_SIMULATED_PROGRESS_TIME

	simulatedProgressInterval = setInterval(() => {
		const elapsed = Date.now() - startTime
		const progress = Math.min(elapsed / duration, 1)
		const easedProgress = progress * (2 - progress) // easeOutQuad
		currentPercentage.value = Math.floor(easedProgress * 99)

		// 更新当前步骤
		for (let i = 0; i < steps.length; i++) {
			if (currentPercentage.value >= steps[i].threshold) {
				currentStep.value = i + 1
			}
		}

		if (progress >= 1) {
			clearInterval(simulatedProgressInterval)
		}
	}, 16)
}

watch(
	() => props.isLoading,
	(newVal) => {
		if (newVal) {
			startSimulatedProgress()
		} else {
			if (simulatedProgressInterval) clearInterval(simulatedProgressInterval)
			currentPercentage.value = 100
			currentStep.value = steps.length
			finalizingProgress.value = true

			imageDisplayTimeout = setTimeout(() => {
				showImage.value = true
				finalizingProgress.value = false
			}, FINAL_PERCENTAGE_ANIMATION_TIME)
		}
	},
	{ immediate: true }
)

watch(
	() => props.resultImage,
	(newVal) => {
		if (newVal && !props.isLoading && props.resultType === 'image') {
			showImage.value = true
			currentPercentage.value = 100
			currentStep.value = steps.length
			finalizingProgress.value = false
		} else if (!newVal) {
			showImage.value = false
			currentPercentage.value = 0
			currentStep.value = 0
			finalizingProgress.value = false
			if (simulatedProgressInterval) clearInterval(simulatedProgressInterval)
			if (imageDisplayTimeout) clearTimeout(imageDisplayTimeout)
		}
	},
	{ immediate: true }
)

// 新增：监听表格数据
watch(
	() => [props.resultData, props.resultType],
	([newData, newType]) => {
		if (newData && !props.isLoading && newType === 'table') {
			showImage.value = true // 复用显示状态
			currentPercentage.value = 100
			currentStep.value = steps.length
			finalizingProgress.value = false
		}
	},
	{ immediate: true }
)

onUnmounted(() => {
	if (simulatedProgressInterval) clearInterval(simulatedProgressInterval)
	if (imageDisplayTimeout) clearTimeout(imageDisplayTimeout)
})
</script>

<template>
	<div class="right-container">
		<!-- 进度卡片 -->
		<div
			class="progress-card"
			v-if="props.isLoading || finalizingProgress"
			:class="{ finalizing: finalizingProgress }"
		>
			<div class="progress-header">
				<div class="progress-icon">
					<div class="icon-animation">
						<svg viewBox="0 0 24 24" width="24" height="24">
							<circle
								cx="12"
								cy="12"
								r="10"
								stroke="currentColor"
								stroke-width="2"
								fill="none"
							/>
							<path
								d="M12 6v6l4 2"
								stroke="currentColor"
								stroke-width="2"
								stroke-linecap="round"
							/>
						</svg>
					</div>
				</div>
				<div class="progress-title">正在分析 {{ title }} 数据</div>
				<div class="progress-subtitle">
					{{
						finalizingProgress
							? '完成分析，准备展示结果'
							: '请稍候，正在处理中...'
					}}
				</div>
			</div>

			<div class="progress-wrapper">
				<el-progress
					:percentage="currentPercentage"
					:stroke-width="8"
					:show-text="false"
					:color="finalizingProgress ? '#2d3748' : '#1a202c'"
					class="custom-progress"
				/>
				<div class="progress-text" :class="{ finalizing: finalizingProgress }">
					<span class="percentage">{{ currentPercentage }}</span>
					<span class="unit">%</span>
				</div>
			</div>

			<div class="progress-steps">
				<div
					v-for="(step, index) in steps"
					:key="index"
					class="step-item"
					:class="{
						active: index < currentStep,
						current: index === currentStep - 1,
						completed: index < currentStep - 1,
					}"
				>
					<div class="step-icon">
						<span v-if="index < currentStep - 1" class="check-icon">✓</span>
						<span v-else-if="index === currentStep - 1" class="current-icon">
							<div class="pulse-dot"></div>
						</span>
						<span v-else class="step-number">{{ index + 1 }}</span>
					</div>
					<div class="step-content">
						<div class="step-text">{{ step.text }}</div>
					</div>
					<div v-if="index < steps.length - 1" class="step-connector"></div>
				</div>
			</div>
		</div>

		<!-- 结果图片 -->
		<div
			class="result-container"
			v-else-if="
				!props.isLoading &&
				props.resultImage &&
				showImage &&
				props.resultType === 'image'
			"
		>
			<div class="image-wrapper">
				<img
					:src="props.resultImage"
					:alt="title + '计算结果'"
					class="result-image"
				/>
				<div class="image-overlay">
					<div class="success-badge">
						<span class="success-icon">✅</span>
						<span class="success-text">{{ title }}分析完成</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 结果表格 -->
		<div
			class="result-container table-container"
			v-else-if="
				!props.isLoading &&
				props.resultData &&
				showImage &&
				props.resultType === 'table'
			"
		>
			<div class="table-wrapper">
				<div class="table-header">
					<div class="success-badge">
						<span class="success-icon">✅</span>
						<span class="success-text">{{ title }}完成</span>
					</div>
				</div>

				<div class="table-content">
					<el-table
						:data="tableData"
						class="result-table"
						stripe
						border
						style="width: 100%"
						:header-cell-style="{
							background: '#f8fafc',
							color: '#2d3748',
							fontWeight: '600',
							fontSize: '14px',
						}"
						:cell-style="{
							fontSize: '14px',
							padding: '12px 8px',
						}"
					>
						<el-table-column label="属性名称" width="200" align="left">
							<template #default="{ row }">
								<div class="property-info">
									<div class="property-name">
										{{ getPropertyInfo(row.property).name }}
									</div>
									<div class="property-code">
										({{ getPropertyInfo(row.property).code }})
									</div>
								</div>
							</template>
						</el-table-column>

						<el-table-column prop="value" label="数值" align="center">
							<template #default="{ row }">
								<span class="property-value">{{ row.value }}</span>
							</template>
						</el-table-column>

						<el-table-column label="单位" width="120" align="center">
							<template #default="{ row }">
								<span class="property-unit">{{
									getPropertyInfo(row.property).unit || '无量纲'
								}}</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<!-- 占位符 -->
		<div
			v-else-if="!props.isLoading && !props.resultImage && !finalizingProgress"
			class="no-data-placeholder"
		>
			<div class="placeholder-icon">
				<svg viewBox="0 0 24 24" width="48" height="48">
					<path
						d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
						fill="currentColor"
					/>
				</svg>
			</div>
			<div class="placeholder-text">
				<h3>等待{{ title }}计算数据</h3>
				<p>
					请选择{{ title.slice(0, 1) }}种元素并设置计算参数以查看{{
						title
					}}分析结果
				</p>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.right-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;

	.progress-card {
		background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
		border-radius: 16px;
		padding: 32px;
		box-shadow:
			0 4px 20px rgba(0, 0, 0, 0.12),
			0 1px 3px rgba(0, 0, 0, 0.15);
		width: min(500px, 90%);
		max-width: 500px;
		border: 1px solid rgba(45, 55, 72, 0.1);
		transform: translateY(0);
		transition: all 0.4s ease;

		&.finalizing {
			background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
			border-color: rgba(45, 55, 72, 0.2);
			box-shadow:
				0 8px 32px rgba(45, 55, 72, 0.15),
				0 2px 8px rgba(45, 55, 72, 0.1);
			transform: translateY(-2px);
		}

		.progress-header {
			text-align: center;
			margin-bottom: 32px;

			.progress-icon {
				margin-bottom: 16px;

				.icon-animation {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 48px;
					height: 48px;
					background: linear-gradient(135deg, #2d3748, #1a202c);
					border-radius: 50%;
					color: white;
					animation: pulse 2s infinite;

					svg {
						animation: rotate 2s linear infinite;
					}
				}
			}

			.progress-title {
				font-size: 20px;
				font-weight: 600;
				margin-bottom: 8px;
				color: #1a202c;
			}

			.progress-subtitle {
				font-size: 14px;
				color: #4a5568;
				opacity: 0.8;
			}
		}

		.progress-wrapper {
			margin: 24px 0 32px;

			.progress-text {
				margin-top: 16px;
				text-align: center;
				transition: all 0.3s ease;

				.percentage {
					font-size: 24px;
					font-weight: 700;
					color: #1a202c;
				}

				.unit {
					font-size: 16px;
					color: #4a5568;
					margin-left: 2px;
				}

				&.finalizing .percentage {
					color: #2d3748;
				}
			}
		}

		.progress-steps {
			.step-item {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				position: relative;
				transition: all 0.3s ease;

				&:last-child {
					margin-bottom: 0;
				}

				.step-icon {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-weight: 600;
					margin-right: 16px;
					transition: all 0.3s ease;
					background: #f7fafc;
					border: 2px solid #e2e8f0;
					color: #a0aec0;
					flex-shrink: 0;

					.check-icon {
						color: #ffffff;
					}

					.current-icon {
						position: relative;

						.pulse-dot {
							width: 8px;
							height: 8px;
							background: #1a202c;
							border-radius: 50%;
							animation: pulse-dot 1.5s infinite;
						}
					}

					.step-number {
						font-size: 12px;
					}
				}

				.step-content {
					flex: 1;
					display: flex;
					align-items: center;

					.step-text {
						font-size: 14px;
						color: #718096;
						transition: all 0.3s ease;
					}
				}

				.step-connector {
					position: absolute;
					left: 15px;
					top: 32px;
					bottom: -20px;
					width: 2px;
					background: #e2e8f0;
					transition: all 0.3s ease;
				}

				&.completed {
					.step-icon {
						background: #2d3748;
						border-color: #2d3748;
						color: white;
					}

					.step-content .step-text {
						color: #2d3748;
						font-weight: 500;
					}

					.step-connector {
						background: #2d3748;
					}
				}

				&.current {
					.step-icon {
						background: #1a202c;
						border-color: #1a202c;
						color: white;
					}

					.step-content .step-text {
						color: #1a202c;
						font-weight: 600;
					}
				}

				&.active:not(.completed):not(.current) {
					.step-icon {
						background: #edf2f7;
						border-color: #1a202c;
						color: #1a202c;
					}

					.step-content .step-text {
						color: #2d3748;
					}
				}
			}
		}
	}

	.result-container {
		width: 100%;
		max-width: 800px;

		.image-wrapper {
			position: relative;
			border-radius: 16px;
			overflow: hidden;
			box-shadow:
				0 8px 32px rgba(0, 0, 0, 0.15),
				0 2px 8px rgba(0, 0, 0, 0.1);
			animation: fadeInUp 0.6s ease;
			padding: 30px;
			.result-image {
				width: 100%;
				height: auto;
				display: block;
				transition: transform 0.3s ease;

				&:hover {
					transform: scale(1.02);
				}
			}

			.image-overlay {
				position: absolute;
				top: 16px;
				right: 16px;

				.success-badge {
					background: rgba(45, 55, 72, 0.95);
					color: white;
					padding: 8px 16px;
					border-radius: 20px;
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: 14px;
					font-weight: 500;
					animation: slideInRight 0.5s ease;

					.success-icon {
						font-size: 16px;
					}
				}
			}
		}

		// 表格容器样式
		&.table-container {
			.table-wrapper {
				background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
				border-radius: 16px;
				padding: 24px;
				box-shadow:
					0 8px 32px rgba(0, 0, 0, 0.15),
					0 2px 8px rgba(0, 0, 0, 0.1);
				animation: fadeInUp 0.6s ease;
				border: 1px solid rgba(45, 55, 72, 0.1);

				.table-header {
					text-align: right;
					.success-badge {
						background: rgba(45, 55, 72, 0.95);
						color: white;
						padding: 8px 16px;
						border-radius: 20px;
						display: inline-flex;
						align-items: center;
						gap: 8px;
						font-size: 14px;
						font-weight: 500;
						margin-bottom: 16px;
						animation: slideInRight 0.5s ease;

						.success-icon {
							font-size: 16px;
						}
					}

					.table-title {
						text-align: center;
						font-size: 20px;
						font-weight: 600;
						color: #2d3748;
						margin: 0;
						letter-spacing: 0.3px;
					}
				}

				.table-content {
					.result-table {
						border-radius: 12px;
						overflow: hidden;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

						:deep(.el-table__header) {
							.el-table__cell {
								background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
								border-bottom: 2px solid #e2e8f0;
							}
						}

						:deep(.el-table__body) {
							.el-table__row {
								transition: all 0.3s ease;

								&:hover {
									background: #f7fafc !important;
									transform: translateY(-1px);
									box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
								}

								.el-table__cell {
									border-bottom: 1px solid #f1f5f9;
								}
							}
						}

						.property-info {
							.property-name {
								font-weight: 600;
								color: #2d3748;
								font-size: 14px;
								margin-bottom: 2px;
							}

							.property-code {
								font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
								font-weight: 500;
								color: #6b7280;
								font-size: 12px;
							}
						}

						.property-value {
							font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
							font-weight: 600;
							color: #1f2937;
							font-size: 14px;
						}

						.property-unit {
							font-weight: 500;
							color: #6b7280;
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.no-data-placeholder {
		text-align: center;
		color: #a0aec0;
		max-width: 400px;

		.placeholder-icon {
			margin-bottom: 24px;
			color: #cbd5e0;
			animation: float 3s ease-in-out infinite;

			svg {
				filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
			}
		}

		.placeholder-text {
			h3 {
				font-size: 18px;
				margin-bottom: 8px;
				color: #4a5568;
				font-weight: 600;
			}

			p {
				font-size: 14px;
				line-height: 1.5;
				margin: 0;
				opacity: 0.8;
			}
		}
	}
}

// 动画定义
@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.8;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse-dot {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.5);
		opacity: 0.7;
	}
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

// 响应式设计
@media (max-width: 768px) {
	.right-container {
		padding: 16px;

		.progress-card {
			padding: 24px;
			width: 100%;

			.progress-header .progress-title {
				font-size: 18px;
			}

			.progress-steps .step-item {
				margin-bottom: 16px;

				.step-content .step-text {
					font-size: 13px;
				}
			}
		}

		.result-container {
			&.table-container {
				.table-wrapper {
					padding: 16px;
					border-radius: 12px;

					.table-header {
						margin-bottom: 16px;

						.table-title {
							font-size: 18px;
						}
					}

					.table-content {
						.result-table {
							border-radius: 12px;
							overflow: hidden;
							box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

							:deep(.el-table__header) {
								.el-table__cell {
									background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
									border-bottom: 2px solid #e2e8f0;
									padding: 8px 4px !important;
									font-size: 12px !important;
								}
							}

							:deep(.el-table__body) {
								.el-table__row {
									transition: all 0.3s ease;

									&:hover {
										background: #f7fafc !important;
										transform: translateY(-1px);
										box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
									}

									.el-table__cell {
										border-bottom: 1px solid #f1f5f9;
										padding: 8px 4px !important;
										font-size: 12px !important;
									}
								}
							}

							.property-info {
								.property-name {
									font-weight: 600;
									color: #2d3748;
									font-size: 12px;
									margin-bottom: 2px;
								}

								.property-code {
									font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
									font-weight: 500;
									color: #6b7280;
									font-size: 11px;
								}
							}

							.property-value {
								font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
								font-weight: 600;
								color: #1f2937;
								font-size: 12px;
							}

							.property-unit {
								font-weight: 500;
								color: #6b7280;
								font-size: 11px;
							}
						}
					}
				}
			}
		}
	}
}
</style>
